<%@ page import="com.sun.xml.internal.ws.policy.EffectiveAlternativeSelector" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>重要网址</title>
  <link href="css/bootstrap.css" rel="stylesheet">
  <script src="js/jquery-3.5.1.js"></script>
  <script src="js/bootstrap.js"></script>
  <link rel="icon" href="images/12.ico">
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    body {
      background-color: #eecdee;
    }
    .taskName {
      display: inline-block;
      max-width: 300px; /*设置最大宽度*/
      /* 限制a标签中的字数为22，多出的部分用...显示 */
      overflow: hidden; /* 隐藏溢出的内容 */
      text-overflow: ellipsis; /* 溢出的文本用省略号显示 */
      white-space: nowrap; /* 文本不换行 */
    }
    #outer {
      width: 100%;
      margin: 0 auto;
      text-align: center;
    }
    .show_url:hover,.show_url:visited,.show_url:active ,.show_url:focus ,.show_url:link {
      text-decoration: none;
    }

    #task_title {
      text-align: center;
      font-family: 华文行楷, sans-serif;
      font-size: 44px;
      color: #255bc4;
      padding-bottom: 22px;
      background-color: #eecdee;
      font-weight: bold;
      margin: 0;
    }

    .task_str {
      text-align: center;
      font-weight: bold;
      color: red;
      margin: 0;
      background-color: #eecdee;
      padding-bottom: 22px;
    }

    #LinkBar {
      position: fixed;
      left: 20px;
      top: 260px;
    }

    #LinkBar button {
      margin: 10px;
      border-radius: 10px;
    }

    .date_month {
      font-family: 黑体;
      font-weight: bold;
      cursor: pointer;
      margin-left: 20px;
    }


    #task_list ul{
      margin-left: 40px;
      margin-top: 20px;
      list-style: none;
      display: none;
      font-size: 22px;
      font-family:微软雅黑 ;
    }

    #task_list ul>li {
      border-bottom: 1px solid #ccc;
      vertical-align: middle;
      margin-top: 10px;
    }

    .my_go_index a {
      text-decoration: none;
      color: #7171ef;
    }

    #task_list {
      width: 70%;
      text-align: left;
      background-color: #eef0c1;
      padding: 20px;
      border-radius: 20px;
      position: relative;
    }

    #search_div {
      width: 60%;
      margin: 0 auto;
      text-align: center;
    }


    #addMottoModal,#updateMottoModal {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 70%;
      height: fit-content;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 10px 10px 20px #474747;
      display: none;
      z-index: 9999;
    }

    #addMottoModal .modal-header,#updateMottoModal .modal-header {
      background-color: #eded63;
      color: #121af1;
      font-family: 微软雅黑;
    }

    #addMottoModal .modal-body,#updateMottoModal .modal-body {
      padding: 20px;
    }

    #addMottoModal .modal-footer,#updateMottoModal .modal-footer {
      padding: 10px;
      text-align: center;
    }

    #addMottoModal input[type="text"],#updateMottoModal input[type="text"] {
      width: 100%;
      height: 40px;
      padding: 10px;
      margin-bottom: 20px;
      border: none;
      border-radius: 5px;
      font-size: 18px;
      font-family: 微软雅黑;
    }

    #addMottoModal button[type="submit"], #addMottoModal button[type="button"],
    #updateMottoModal button[type="submit"], #updateMottoModal button[type="button"] {
      width: 100px;
      height: 40px;
      color: #fff;
      border: none;
      border-radius: 5px;
      font-size: 18px;
      font-family: 微软雅黑;
      cursor: pointer;
    }
    .li_note{
      postion: relative;
      width: 90%;
      overflow: hidden; /* 隐藏溢出的内容 */
      text-overflow: ellipsis; /* 溢出的文本用省略号显示 */
      white-space: nowrap; /* 文本不换行 */
    }

    .li_note span:nth-of-type(2){
      margin-left: 30px;
      color: black;
      font-size: 16px;
    }
    .update_note{
      position: absolute;
      right: 10px;
    }

    .show_id{display: none}
    .href{
      color: blue;
      cursor: pointer;
    }


    @media (max-width: 1023px) {   /* 小于1024px时 */
      #addMottoModal,#updateMottoModal {
        width: 80%;
      }

      #addMottoModal button[type="submit"],#updateMottoModal button[type="submit"] {
        margin-left: 20px;
      }

      #addMottoModal button[type="button"],#updateMottoModal button[type="button"] {
        margin-right: 20px;
      }


      #LinkBar {
        left: 80%;
        top: 210px;
      }

      #LinkBar .btn {
        margin: 5px;
        width: 80%;
        padding: 5px 20px 5px 10px;
        height: 50%;
        font-size: 14px;
      }

      #task_list {
        margin: 0px 10px 0px 20px;
        width: 90%;
      }


      .task_str {
        font-size: 12px;
      }

      #task_list ul {
        margin-left: 10px;
        font-size: 16px;
      }
      .li_note{
        width: 70%;
      }
      .date_month{
        font-size: 14px;
      }
    }


    @media (min-width: 1024px) {    /* 大于1024px时 */
      #task_list {
        margin: 0px auto;
      }
    }

  </style>
</head>
<body>
<%
  int uid = session.getAttribute("uid")==null?0:Integer.parseInt(session.getAttribute("uid").toString());
  if (uid == 0) {
    response.sendRedirect("login.jsp");
    return;
  }
%>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
              data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">切换导航</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="getTask.jsp" target="_parent">首页·计划管理</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a target="_parent" href="TaskLineServlet">任务成就</a></li>
        <li><a target="_parent" href="ProSpectServlet?what=query">布局·规划</a></li>
        <li><a target="_parent" href="URLServlet?what=query">重要网址</a></li>
        <li><a target="_parent" href="NoteServlet?what=query">重要记事</a></li>
        <li><a target="_parent" href="mottos.jsp">感悟·格言</a></li>
        <li><a target="_parent" href="bookNotes.jsp">读书笔记</a></li>

      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">搜索</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a target="_parent" id="login_out"><% String uname = (String) session.getAttribute("uname");
          String welcomeMessage = "欢迎,登录";
          if (uname != null && !uname.isEmpty()) {
            welcomeMessage = "欢迎," + uname + "[退出登录]";
          }
          out.print(welcomeMessage);
        %>
        </a></li>
        <li><a target="_parent" href="regist.jsp">注册</a></li>
        <li><a target="_parent" href="#">会员中心</a></li>
        <li><a target="_parent" href="Contact_us.jsp">联系我们</a></li>
      </ul>
    </div>
  </div>
</nav>

<%--  网址数据内容显示模块  --%>
<div id="outer">
  <h1 id="task_title">重要网址记录</h1>
  <h3 class="task_str">将重要的网址和账号信息存在这里，方便多设备登录本网站查阅</h3>
  <div id="search_div">
    <div class="input-group">
      <input type="text" id="search_input" class="form-control"
             placeholder="输入关键字可以模糊查询网站信息">
      <span class="input-group-btn">
                    <button class="btn btn-primary" id="search_btn" type="button">查找网址</button>
               </span>
    </div>
  </div>
  <hr>

  <div id="task_list">
    <%--            从session中过去列表notes,同时获取所有分类note_classz列表，判断notes中的元素类别是否存在于note_classz中，如果存在
                    则显示在当前的类别下，如果不存在，就新开一个列表显示。--%>
    <c:forEach items="${url_categorys}" var="category">
      <h3 class="date_month">${category}</h3>
      <ul id="ul_${category}">
        <c:forEach items="${urls}" var="url">
          <c:if test="${url.category == category}">
            <li class="li_note" >
              <span class="show_id">${url.id}</span>

              <c:if test="${url.url.startsWith('http://') || url.url.startsWith('https://')}">
                <a href="${url.url}" target="_blank" class="show_url">
                  <span class="taskName label label-warning">${url.url_desc}</span>
                  <span class="taskUrl label label-warning">${url.url}</span>
                </a>
              </c:if>
              <c:if test="${!url.url.startsWith('http')}">
                <a href="https://${url.url}" target="_blank" class="show_url">
                  <span class="taskName label label-warning">${url.url_desc}</span>
                  <span class="taskUrl label label-warning">${url.url}</span>
                </a>
              </c:if>
              <span class="update_note">
                <a class="href" onclick="updateURL(`${url.id}`,`${url.url}`,`${url.acc_pwd}`,`${url.url_desc}`,`${category}`)"> 更新 </a> |
                                        <a id="del${url.id}" class="href" onclick="delURL('${url.id}')"> 删除 </a></span>
            </li>
          </c:if>
        </c:forEach>
      </ul>
    </c:forEach>
  </div>
</div>

<%--添加记事模块--%>
<div id="addMottoModal" class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <h4 style="text-align: center;" class="modal-title"> 添 加 网 址 </h4>
    </div>
    <div class="modal-body">
      <form id="addMottoForm" action="" method="post">
        <span style="font-size: 15px;font-weight: bold;">请输入网址分类 或选择 现有分类：</span>
        <select name="category" id="note_class">
          <option value="请选择"> --请选择-- </option>
          <c:forEach items="${url_categorys}" var="category">
            <option value="${category}">${category}</option>
          </c:forEach>
        </select>
        <input type="text" id="in_note_class" name="in_note_class" class="form-control" placeholder="请输入新的记事分类">
        <div class="form-group">
          <label for="url">网址</label>
          <textarea id="url" cols="30" maxlength="255" class="form-control" name="url"
                    placeholder="请输入你的网址" rows="2"></textarea>
          <label for="url_desc">网址名称</label>
          <textarea id="url_desc" cols="30" maxlength="100" class="form-control" name="motto"
                    placeholder="请输入你的网址" rows="2"></textarea>
          <label for="acc_pwd">账号密码及备注</label>
          <textarea id="acc_pwd" cols="30" maxlength="200" class="form-control" name="acc_pwd"
                    placeholder="请输入你的账号密码" rows="4"></textarea>
        </div>
      </form>
      <div class="modal-footer">
        <button id="add_close" type="button" class="btn btn-info" data-dismiss="modal">关闭</button>
        <button id="add_submit" type="submit" class="btn btn-info">提交</button>
      </div>
    </div>
  </div>
</div>

<%--更新记事模块--%>
<div id="updateMottoModal" class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <h4 style="text-align: center;" class="modal-title"> 更 新 网 址 </h4>
    </div>
    <div class="modal-body">
      <form id="updateMottoForm" action="URLServlet" method="post">
        <span style="font-size: 15px;font-weight: bold;">请输入网址分类 或选择 现有分类：</span>
        <select name="note_class" id="up_note_class">
          <option value="请选择"> --请选择-- </option>
          <c:forEach items="${url_categorys}" var="category">
            <option value="${category}">${category}</option>
          </c:forEach>
        </select>
        <input type="text" id="up_in_note_class" name="in_note_class" class="form-control" placeholder="请输入新的记事分类">
        <div class="form-group">
          <label for="up_url">网址</label>
          <textarea id="up_url" cols="30" maxlength="255" class="form-control" name="up_url"
                    placeholder="请输入你的网址" rows="2"></textarea>
          <label for="up_note">网址名称</label>
          <textarea id="up_note" cols="30" maxlength="100" class="form-control" name="motto"
                    placeholder="请输入你的记事" rows="2"></textarea>
          <label for="up_acc_pwd">账号密码及描述</label>
          <textarea id="up_acc_pwd" cols="30" maxlength="200" class="form-control" name="up_acc_pwd"
                    placeholder="请输入你的账号密码" rows="4"></textarea>

        </div>
      </form>
      <div class="modal-footer">
        <button id="up_add_close" type="button" class="btn btn-info" data-dismiss="modal">关闭</button>
        <button id="up_submit" type="submit" class="btn btn-info">提交</button>
      </div>
    </div>
  </div>
</div>


<!-- 创建一个垂直按钮组，用于操作任务列表的展开和折叠 -->
<div id="LinkBar" class="btn-group-vertical btn-group-lg" role="group" aria-label="...">
  <!-- 用于展开所有任务列表的按钮 -->
  <button type="button" id="addMottoBtn" class="btn btn-danger">添加记事</button>
  <!-- 用于展开所有任务列表的按钮 -->
  <button type="button" id="all_expand" class="btn btn-info">全部展开</button>
  <!-- 用于折叠所有任务列表的按钮 -->
  <button type="button" id="all_collapse" class="btn btn-success">全部折起</button>
  <hr>
  <button type="button" id="to_top" class="btn btn-primary">回到顶部</button>
  <button type="button" id="to_bottom" class="btn btn-warning">跳到底部</button>
</div>

<footer style="background-color: #eecdee; margin-top: 50px;" class="navbar-fixed-bottom  text-center"
        style="color: yellow; font-size: 14px">
  <!--                <a target="_blank" href="#">友情链接</a>-->
  <a target="_blank" href="https://beian.miit.gov.cn">京ICP备2024085356号</a>
  <!--                <a target="_blank" href="#">联网许可</a>-->
</footer>


</body>
<script>

  <%--    判断是否打开所有任务列表 ----%>
  let is_open = sessionStorage.getItem("isOpen");
  if (is_open == "true") {
    $("li").show();
    $(".year_div").slideDown(0,function (){});
    $(".date_month+ul").slideDown(0,function (){});
  }else if (is_open == "false") {
    $("li").show();
    $(".year_div").slideUp(0,function (){});
    $(".date_month+ul").slideUp(0,function (){});
  }

  // 更新记事数据
  function updateURL(id, url,acc_pwd,url_desc,category) {
    $("#up_url").val(url);
    $("#up_acc_pwd").val(acc_pwd);
    $("#up_note_class").val(category);     // 更新网址分类
    $("#up_note").val(url_desc);         // 更新网址描述
    $("#updateMottoModal").show(); // 显示更新格言模块

    $("#up_submit").click(function () {
      let up_note_class = $("#up_note_class").val();
      let up_in_note_class = $("#up_in_note_class").val();
      if (up_note_class == "请选择" && up_in_note_class == "") {
        alert("请选择记事分类，者输入新的分类！");
        return;
      }
      if(up_in_note_class!=""){
        up_note_class = up_in_note_class;
      }
      let up_note = $("#up_note").val();
      let up_url = $("#up_url").val();
      let up_acc_pwd = $("#up_acc_pwd").val();
      if (url_desc ==up_note && up_url == url && up_acc_pwd == acc_pwd && up_note_class == category){
        alert("没有更改的内容,无需更新！");
        return;
      }
      if (up_url == "" || up_url==null){
        alert("更新后的网址数据不能为空！");
        return;
      }
      $.ajax({
        url: "URLServlet",
        type: "post",
        data: {"what": "update", "id": id, "url": up_url, "acc_pwd": up_acc_pwd,
          "url_desc": up_note,
          "category": up_note_class},
        datatype: "text",
        success: function (data) {
          if (data === "up_success") {
            alert("更新成功!");
            location.href="URLServlet?what=query"
          } else {
            alert("更新失败!");
          }
        },
        error: function () {
          alert("更新失败!----异步请求错误！");
        }
      });
      $("#updateMottoModal").hide(); // 隐藏更新记事模块
    });
  }


  // 显示添加格言模块
  $("#addMottoBtn").click(function () {
    $("#addMottoModal").show();
  });

  // 隐藏添加格言模块
  $("#add_close").click(function () {
    $("#addMottoModal").hide();
    $("#motto").val("");
  });

  // 隐藏更新记事模块
  $("#up_add_close").click(function () {
    $("#updateMottoModal").hide();
    $("#up_note").val("");
  });

  // 添加按钮被点击
  $("#add_submit").click( function () {
    let category = $("#note_class").val();
    let url = $("#url").val();
    let url_desc = $("#url_desc").val();
    let acc_pwd = $("#acc_pwd").val();
    let in_note_class = $("#in_note_class").val();
    if (category === "请选择" && in_note_class === "") {
      alert("请选择网址分类，者输入新的分类！");
      return;
    } else if (category === "请选择" && in_note_class !== "") {
      category = in_note_class;
    }
    if (url == "" || url == null){
      alert("请输入您要添加的网址信息！");
      return;
    }
    $.ajax({
      url: "URLServlet",
      type: "post",
      data: {"what": "add", "url": url,
        "url_desc": url_desc, "acc_pwd": acc_pwd,
        "category": category},
      datatype: "json",
      success: function (note) {
        if (note) {
          $("html,body").animate({scrollTop: 0}, 500);
          location.href="URLServlet?what=query";
        } else {
          alert("添加失败!");
        }
      },
      error: function () {
        alert("添加失败!----异步请求错误！");
      }
    });
    $("#addMottoModal").hide(); // 隐藏添加记事模块
    $("#note_class").val("请选择");
    $("#url_desc").val("");
    $("#url").val("");
    $("#acc_pwd").val("");
    $("#in_note_class").val("");
  }); // 提交添加url数据


  $("#task_list h3").click(function () {
    $(this).next("ul").slideToggle(500, function () {
    })
  });
  $(".date_year").click(function () {
    $(this).next(".year_div").slideToggle(300, function () {
    })
  });
  $("#all_expand").click(function () {
    $("li").show();
    $(".year_div").slideDown(500, function () {
    });
    $(".date_month+ul").slideDown(1000, function () {
    });
    sessionStorage.setItem("isOpen", "true");
  });
  $("#all_collapse").click(function () {
    $("li").show();
    $(".date_month+ul").slideUp(1000, function () {
    })
    $(".year_div").slideUp(1200, function () {
    });
    sessionStorage.setItem("isOpen", "false");
  });

  // 搜索数据的功能
  $("#search_btn").click(function () {
    let btn_state = $(this).text();
    let searchText = $("#search_input").val().trim();
    if (btn_state === "显示全部网址" && searchText==="") {
      $("li").show();
      $(".year_div").slideDown(500, function () {
      });
      $(".date_month+ul").slideDown(1000, function () {
      });
      sessionStorage.setItem("isOpen", "true");
      $("#search_btn").text("查找网址");
      return;
    }
    let isHaveResult = false;
    $(".taskName").each(function () {
      let taskName = $(this).text();
      //判断searchText是否在taskName中，如果在就显示出来，其他的隐藏起来。
      if (taskName.indexOf(searchText) == -1) {
        $(this).parent().parent().hide();
      } else {
        isHaveResult = true;
        $(this).parent().parent().show().parent().show();
      }
    });
    if (!isHaveResult) {
      alert("没有找到 ▶ "+searchText+" ◀ 相关网址");
    }
    $("#search_input").val("");
    $(this).text("显示全部网址");
  });

  // 动态滚动文字效果
  // 初始化 mottos 变量为从服务器传输过来的 JSON 字符串
  <%--const mottos = <%= jsonMottos %>;--%>
  const scrollText = $('.scroll-text');
  // 当滚动开始时，显示文本并更新内容
  scrollText.each(function () {
    $(this).on('animationstart', function () {
      // 更新内容在动画开始时
      const newMotto = mottos[Math.floor(Math.random() * mottos.length)];
      $(this).text(newMotto); // 更新文本
      $(this).css('opacity', '1'); // 开始动画时显示文本
      $(this).css('left', '100%'); // 确保文本位置在右边
    });
    // 当滚动到最左边时，重新回到最右边开始滚动
    $(this).on('animationiteration', function () {
      const newMotto = mottos[Math.floor(Math.random() * mottos.length)];
      $(this).text(newMotto); // 更新文本
      $(this).css('opacity', '0'); // 重新定位后隐藏文本
    });
  });

  // 点击登录按钮退出登录，跳转到登录页面
  $("#login_out").click(function () {
    let b = confirm("确定退出当前账号的登录吗?");
    if (b) {
      //删除浏览器中的cookie信息
      document.cookie = "task_uid=;expires=" + new Date(0).toUTCString();
      document.cookie = "task_uname=;expires=" + new Date(0).toUTCString();
      location.href = "login.jsp";
    }
  });

  $("#to_top").click(function () {
    $("html,body").animate({scrollTop: 0}, 500);
  });
  $("#to_bottom").click(function () {
    $("html,body").animate({scrollTop: $(document).height()}, 500);
  })

  // 删除记事数据的操作
  function delURL(id) {
    let b = confirm("确定要删除吗?");
    if (!b) {
      return;
    }
    $.ajax({
      url: "URLServlet",
      type: "post",
      data: {"what":"delete","id": id},
      datatype: "text",
      success: function (data) {
        if (data === "del_success") {
          $("#del" + id).parent().parent().remove();
          location.href="URLServlet?what=query";
        }else{
          alert("删除失败!");
        }
      },
      error: function () {
        alert("删除失败!----异步请求错误！");
      }
    });
  }

</script>
</html>
